<template>
	<view class="container">
		<!-- 顶部自定义导航 -->
		<status-bar-height></status-bar-height>
		<!-- 搜索框 -->
		<input-search :disabled="true"></input-search>
		<!-- 轮播图 -->
		<swiper
			class="swiper"
			:indicator-dots="true"
			:autoplay="true"
			:interval="5000"
			:duration="500"
			:indicator-color="'rgba(255, 255, 255, .4)'"
			:indicator-active-color="'#ffffff'"
		>
			<swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item>
			<swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item>
			<swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item>
		</swiper>
		<!-- 功能模块 -->
		<view class="function-list">
			<view class="function-item" @click="onCatArchives">
				<icon class="icon-MMDA"></icon>
				<text class="function-text">猫咪档案</text>
			</view>
			<view class="function-item">
				<icon class="icon-MFWZ"></icon>
				<text class="function-text">免费问诊</text>
			</view>
			<view class="function-item">
				<icon class="icon-KFPT"></icon>
				<text class="function-text">开放平台</text>
			</view>
			<view class="function-item">
				<icon class="icon-TDSL"></icon>
				<text class="function-text">团队实力</text>
			</view>
		</view>
		<!-- 列表标题 -->
		<view class="dashu-flex">
			<text class="dashu-title">大树宠医</text>
			<text class="dashu-all" @click="toAllDoctor">全部</text>
		</view>
		<!-- 列表 -->
		<doctor-list />
		<!-- 结束图片 -->
		<end-img />
	</view>
</template>

<script>
const app = getApp();
import StatusBarHeight from '@/components/statusBarHeight/index.vue';
import InputSearch from '@/components/inputSearch/inputSearch.vue';
import EndImg from '@/components/endImg/endImg.vue';
import DoctorList from '@/components/doctorList/doctorList.vue';
export default {
	components: {
		StatusBarHeight,
		InputSearch,
		EndImg,
		DoctorList
	},
	data() {
		return {};
	},
	methods: {
		// 查看全部医生列表
		toAllDoctor() {
			uni.navigateTo({
				url: `/pagesHome/doctorList/doctorList`
			});
		},
		// 跳转猫咪档案列表
		onCatArchives() {
			uni.navigateTo({
				url: `/pagesArchives/archivesList/archivesList`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding: 0 32rpx;
	.swiper {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		margin: 32rpx 0 36rpx;
		.swiper-item {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
			background: #4cd964;
		}
	}
	.function-list {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			& > icon {
				width: 96rpx;
				height: 96rpx;
			}
			.function-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				margin-top: 24rpx;
			}
			.icon-MMDA {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-mmda.png) no-repeat;
				background-size: cover;
			}
			.icon-MFWZ {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-zzwz.png) no-repeat;
				background-size: cover;
			}
			.icon-MFWZ {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-zzwz.png) no-repeat;
				background-size: cover;
			}
			.icon-KFPT {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-kfpt.png) no-repeat;
				background-size: cover;
			}
			.icon-TDSL {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-tdsl.png) no-repeat;
				background-size: cover;
			}
		}
	}
	.dashu-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		.dashu-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
		.dashu-all {
			position: relative;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			padding-right: 22rpx;
			&::before {
				content: '';
				width: 12rpx;
				height: 16rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-home-right.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}
		}
	}
}
</style>
